<template>
	<view>
		<u-swiper  :list="slides" name="img_url" height="320"></u-swiper>
		<view class="u-text-center u-m-t-30">
			<u-tabs :list="tabsList" bar-width="100" item-width="160" :current="currentSort"  @change="changeTabs"></u-tabs>
		</view>
		
		<u-row gutter="16"  class="u-skeleton">
			<u-col span="6" v-for="goods in goodsList.length !==0 ? goodsList : [{},{},{},{}]">
				<goods-card :goods="goods"></goods-card>
			</u-col>
		</u-row>
		
		<!--引用组件-->
				<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsList: [
					{
						name: '默认'
					}, {
						name: '销量'
					}, {
						name: '推荐'
					}, {
						name: '最新'
					}
				],
				currentSort: 0,
				slides: [],
				goodsList: [],
				page: 1,
				loading: false,
				
			}
		},
		// onLoad() {
		// 	//这样写其他请求需要嵌套在上一个请求里面
		//  如果这样写代码不一定按顺序执行
		// 	// this.$u.get('/api/index').then(res=>{
		// 	// 	 console.log(res);
		// 	// })
		// }
		onLoad() {
			//await（等候） 必须写在async（异步串口）中
			//这样写代码才会按顺序执行
			// console.log("2222222");
			// try{
			// 	const res = await this.$u.patch('/api/orders/1/confirm');
			// 	console.log(res);
			// }catch(e){console.log(e);}
			// console.log("11111111");
			
			//集中管理api
			//const res = await this.$u.api.index()
			//console.log(res);
			// const authLogin = await this.$u.api.authLogin({email: 'super@a.com',password:'123123'})
			// console.log(authLogin);
			
			
			// const res = await this.$u.api.index().then(res=>{
			// 	console.log(res);
			// 	this.slides = res.slides;
			// 	this.goods = res.goods.data;
				
			// })
			// const res = await this.$u.api.index();
			// this.slides = res.slides;
			// this.goods = res.goods.data;

			
			
			//页面加载就调用getData()方法得到数据
			this.getData();
			// console.log(this.vuex_name);
			// this.$u.vuex("vuex_name","haha")
		
		},
		methods: {
			
			changeTabs(index){
				console.log(index);
				this.currentSort = index;
				//1.判断筛选事件
				//2. 重置商品数据和分页
				this.goodsList = []
				// 3. 重置分页数据
				this.page = 1
				this.getData();
				
			},
			async getData(){
				this.loading = true;
				const params={
					page: this.page
				}
				//增加筛选判断
				if(this.currentSort == 1) params.sales = 1
				if(this.currentSort == 2) params.recommend = 1
				if(this.currentSort == 3) params.new = 1
				const res = await this.$u.api.index(params);
				this.loading = false
				this.slides = res.slides;
				this.goodsList = [...this.goodsList,...res.goods.data];
			}
		},
		onReachBottom()  {
			//重新请求数据，带上分页数
			 this.page = this.page+1;			
			this.getData()
			
		}
	}
</script>

<style lang="scss" scoped>
	
</style>
